<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    财务数据
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>钱箱取补统计</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='options'>
            <el-input placeholder="筛选：机器设备标识" size='small' v-model='params.btm' clearable style='width:200px;margin-right: 15px;'></el-input>
            <el-input placeholder="筛选：手机号" v-model='params.phone' size='small' clearable style='width:200px;margin-right: 15px;'></el-input>
            <el-input placeholder="筛选：流水号" v-model='params.code' size='small' clearable style='width:200px;margin-right: 15px;'></el-input>

            <br>

            <el-select placeholder="法币种类" size="small" clearable v-model='params.virtualCurrencyId' style='width:200px;margin-right: 15px;'>
                <el-option label='所有法币' value=''></el-option>

            </el-select>
            <el-select placeholder="国家" size="small" clearable @focus="getCountry" v-model="params.country" style='width:200px;margin-right: 15px;'>
                <el-option label='所有国家' value=''></el-option>
                <el-option v-for='(item,index) of country' :key='index'
                :label='item.chineseName'
                :value='item.id'>
                </el-option>
            </el-select>
            <el-date-picker 
                class="handle-date"
                size='small'
                @change='showSelect'
                v-model="select_date"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>

            <el-button type='success' @click='getList' size="small">搜索</el-button>

            <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="流水号" align='center'> </el-table-column>
            <el-table-column label="操作类型" align='center'>
                <template slot-scope="scope">
                    {{scope.row.category==0?'存款':scope.row.category==1?'取款':scope.row.category==2?'补钞':'取钞'}}
                </template>    
            </el-table-column>
            <el-table-column label="金额" align="center">
            </el-table-column>
            <el-table-column label="数量" sortable align='center'>
               <template slot-scope="scope">
                <span style='font-size: 0.8rem;'>小额钱箱：{{scope.row.boxData.length&&scope.row.boxData[0]['num']}}</span>
                <br>
                <span style='font-size: 0.8rem;'>大额钱箱：{{scope.row.boxData.length>1?scope.row.boxData[1].num:''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="btm.name" label="交易设备名称" sortable align='center'>
            </el-table-column>
            <el-table-column label="国家" align="center">
                <template slot-scope="scope">
                    {{scope.row.user?scope.row.user.country.chineseName:scope.row.operator?scope.row.operator.country.chineseName:''}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime"  sortable  label="操作时间" align='center'>
            </el-table-column>
            <el-table-column sortable  label="操作人手机号" align='center'>
                <template slot-scope="scope">
                    {{scope.row.user?scope.row.user.phone:scope.row.operator?scope.row.operator.phone:''}}
                </template>
            </el-table-column>
            
         </el-table>
         
        <div class="pagination">
            <el-pagination  @current-change ="handleCurrentChange"
                    :page-size="params.size"
                    layout="prev, pager, next"
                    :total="all_page">
            </el-pagination>
        </div>
        </div>
        <loading v-if='loading' :tip='tip'></loading>
    </div>
</template>
<script>
    import { api,apiGet,apiPatch,apiDelete} from '@/api/index';
    import loading from '@/components/common/loading.vue';
    export default {
        data() {
            return {
                loading:false,
                tip:'',
                all_page:1,
                select_date:[],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                country:[],
                tableData:[],
                params:{
                    page:0,
                    size:5,
                    // virtualCurrencyId:'',
                    category:'',
                    btm:'',
                    phone:'',
                    code:'',
                    virtualCurrencyId:'',
                    startTime:'',
                    endTime:'',
                    country:'',
                },
            }
        },
        components:{
            loading
        },
        methods: {
            handleSelectionChange(){

            },
            handleCurrentChange(val){
                this.params.page=val-1;
                this.getList();
            },
            getCountry(){
                var params={
                    page:0,
                    size:10,
                }
                apiGet.country.getCountry(params).then(res=>{
                    //console.log(res)
                    this.country=res.content;
                    // for(var i=0;i<4;i++){
                    //   this.country.push(res.content)
                    // }
                })
            },
            showSelect(){
                // //console.log(this.select_date);
                var pecker=[];
                // //console.log(this.select_date);
                if(this.select_date){
                this.select_date.map(item=>{
                    var date = item; //日期对象
                    var now = "";
                    now = date.getFullYear()+"-"; //读英文就行了
                    now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
                    now = now + date.getDate()+" ";
                    now = now + date.getHours()+":";
                    now = now + date.getMinutes()+":";
                    now = now + date.getSeconds()+"";
                    // //console.log(now)
                    pecker.push(now);
                })
                this.params.startTime=pecker[0];
                this.params.endTime=pecker[1];
                }else{
                this.params.startTime='';
                this.params.endTime='';
                }
            },
            getList(){
                this.loading=true;

                apiGet.drive.btmLog(this.params).then(res => {
                    this.tableData=res.content;
                    //console.log(this.tableData,'日志查看');
                    this.loading=false;
                    this.all_page=res.totalElements;
                })
            }
        },
        mounted () {
            this.getList();
        }
    }
</script>
<style>
.handle-date{
    width:424px;
    height: 30px;   
    display:inline-block;
    /* vertical-align:top; */
    margin:15px 20px 10px 0;
}
</style>
